<!doctype html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>AngularJS poster gallery</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <div id="wrap" ng-controller="photos">
            <div ng-class="{'photo':true,'photo-front':item.front, 'photo-back':item.back, 'photo-center':item.center}" ng-repeat="item in list" ng-click="photoClick(item)"
                ng-style="item.style">
                <div class="photo-wrap">
                    <div class="side side-front">
                        <p class="image"><img ng-src="{{item.img}}"></p>
                        <p class="caption">{{item.caption}}</p>
                    </div>
                    <div class="side side-back">
                        <p class="desc" data-ng-bind-html="item.desc"></p>
                    </div> 
                </div>
            </div>
            <div class="nav">
                <span ng-class="{'i':true,'i-current':item.center, 'i-back':item.back}" ng-repeat="item in list" ng-click="photoClick(item)"></span>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="js/data.js"></script>
    <script src="js/angularposter.js"></script>
</html>
